<!--ljx 2024.8.20 模板页面  -->
<template>
  <div class="">
    data中定义的变量：{{ msg }}
    <br />
    setup中定义的变量：{{ myvar }}
    <br />
    <button @click="fun()">测试methods中函数</button> |
    <button @click="setupfun()">测试setup中函数</button>
  </div>
</template>

<script setup>
//import bbb1 from './bbb1.vue'
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate } from "vue";
import { onUnmounted } from "vue";
import { onUpdated } from "vue";
import { onMounted } from "vue";
import { ref } from "vue"; //引入定义响应式对象

const msg = ref("测试数据");

//方法集合
const fun = () => {
  // alert('我是老大');
  msg.value = "老大变小弟";
};

components: {
} //import引入的组件需要注入到对象中才能使用
computed: {
} //监听属性 类似于data概念
watch: {
} //监控data中的数据变化

const myvar = ref("my first go"); //定义响应式变量myvar，在数据变化时自动更新DOM
const setupfun = () => {
  myvar.value = "my second go";
}; //定义setup中的函数
//返回setup中定义的变量和函数
//开始创建组件之前，在 beforeCreate 和 created 之前执行

// beforeCreate() {} //生命周期 - 创建之前
// created() {} //生命周期 - 创建完成（可以访问当前this实例）
onBeforeMount(() => {}); //生命周期 - 挂载之前
onMounted(() => {}); //生命周期 - 挂载完成（可以访问DOM元素）
onBeforeUpdate(() => {}); //生命周期 - 更新之前
onUpdated(() => {}); //生命周期 - 更新之后
onUnmounted(() => {}); //注册一个回调函数，在组件实例被卸载之后调用。
onBeforeMount(() => {}); //注册一个钩子，在组件被挂载之前被调用。
onBeforeUnmount(() => {}); //注册一个钩子，在组件实例被卸载之前调用。

</script>
<style scoped>
</style>